<template>
    <div class="detail">
        <van-nav-bar
        title="详情页"
        left-text="返回"
        right-text="按钮"
        left-arrow
        @click-left="$router.go(-1)"
        />
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in item.imger" :key="index">
            <img :src="item.img" alt=""  v-lazy="item.img">
        </van-swipe-item>
        </van-swipe>
        <p>
            {{item.someTitle}}
        </p>
        <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
        <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
        <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
        <van-goods-action-button
            type="danger"
            text="立即购买"
            @click="onClickButton"
        />
        </van-goods-action>
    </div>
</template>

<script>
import {getDetail} from "../../api/index"
import { Toast } from 'vant';
export default {
    name: 'detail',

    data() {
        return {
            id:"",
            item:{}
        };
    },

    mounted() {
        
    },

    methods: {
        onClickIcon() {
        Toast('点击图标');
        },
        onClickButton() {
        Toast('点击按钮');
        },
    },
    created () {
        this.id = this.$route.query.id
        // console.log(this.$route.query.id);
        getDetail(this.id).then(res=>{
            this.item = res.data.data
            console.log(this.item);
        })
    }
};
</script>

<style lang="scss" scoped>
.detail{
    width: 100%;
    height: 100%;
    .my-swipe .van-swipe-item {
        width: 100%;
        height: 300px;
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
</style>